<template>
	<view class="prize-draw-container">
		<image 
			style="width: 100%; height: 50px;"
			src="https://home.zjuzhan.com/crmebimage/public/maintain/2025/11/15/8a1bc9e12cfa41219e16660ca424167fbk0j4g88ts.png">
		</image>
		<view class="reward" @click="goReward">
			我的奖励
		</view>
		<view style="display: flex; justify-content: center; padding: 30px 0;">
			<prizeWheel size="600rpx" :prizeList="prizeList" @click="onClick" @done="onDone" ref="dialer"
				:styleOpt="{
					color: '#fd2c25',
					fontSize: '14px',
				}"
				dial-style="color: rgba(60,48,158,0.7); padding: 32rpx; background-image: url(https://home.zjuzhan.com/crmebimage/public/maintain/2025/11/15/107ea1e0208c4261b7a9fe37fa22a2bby7e7rjbvjm.png)">
			</prizeWheel>
		</view>
		<view class="prize-draw-info">
			<view class="title">{{ prizeDraw.name }}</view>
			<view class="description">{{ prizeDraw.description }}</view>
			<view class="cost">每次消耗积分: {{ prizeDraw.cost }}</view>
			<view class="integral">当前积分： {{ integral }}</view>
		</view>
	</view>
</template>

<script>
	import {
		getPrizeDrawInfo,
		draw
	} from '@/api/draw.js';
	import prizeWheel from '@/components/prize-wheel/index.vue'
	import {
		postIntegralUser
	} from '@/api/user.js';

	export default {
		data() {
			return {
				prizeDraw: {},
				prizeList: [{
						id: '1',
						name: '一等奖',
						img: 'https://home.zjuzhan.com/crmebimage/public/content/2025/10/24/4f370843ca284df7acf952456c09d344rkymtzyt9n.jpg',
					},
					{
						id: '2',
						name: '二等奖',
						img: 'https://home.zjuzhan.com/crmebimage/public/content/2025/10/21/17efec2adaa64958828354d3f53df354g4q2w66ie7.jpg',
					},
					{
						id: '3',
						name: '三等奖',
						img: 'https://home.zjuzhan.com/crmebimage/public/content/2025/10/21/56188f165c294d868dd5b70a01e31e4dqcpuu97d8n.jpg',
					},
					{
						id: '4',
						name: '四等奖',
						img: 'https://home.zjuzhan.com/crmebimage/public/content/2025/11/03/680f5df0d2b84babacdb341c0d2ba574ds1f91amml.jpg',
					},
					{
						id: '5',
						name: '五等奖',
						img: 'https://home.zjuzhan.com/crmebimage/public/content/2025/11/03/9fcfc09bda9a4f00ba500afd4993795cmtx2pw6o3d.jpg',
					},
					{
						id: '6',
						name: '特等奖',
						img: 'https://home.zjuzhan.com/crmebimage/public/content/2025/10/21/27b7ccc47ddf4885aadb9b55c84679b0cmxfevgz0g.jpg',
					},
				],
				integral: 0,
			};
		},
		components: {
			prizeWheel
		},
		onLoad(options) {
			this.getPrizeDrawData(options.id);
			this.getUserIntegral();
		},
		methods: {
			getPrizeDrawData(id) {
				getPrizeDrawInfo(id).then(res => {
					this.prizeDraw = res.data;
				});
			},
			getUserIntegral() {
				postIntegralUser().then((res) => {
					this.integral = res.data.integral;
				});
			},
			performDraw() {
				uni.showLoading({
					title: '正在抽奖...'
				});
				draw(this.prizeDraw.id).then(res => {
					uni.hideLoading();
					// Handle draw result
					if (res.data && res.data.wonPrize) {
						uni.showModal({
							title: '恭喜您！',
							content: '抽中：' + res.data.wonPrize.name,
							showCancel: false,
							confirmText: '确定'
						});
					} else {
						uni.showModal({
							title: '很遗憾',
							content: res.message || '未中奖，再接再厉！',
							showCancel: false,
							confirmText: '确定'
						});
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err,
						icon: 'none',
						duration: 2000
					});
				});
			},

			onDone(index) {
				const prize = this.prizeList[index]
				uni.showModal({
					title: prize.id == 'thanks' ? '很遗憾' : '恭喜您',
					content: (prize.id != 'thanks' ? `获得` : '') + prize.name
				})
			},
			onClick() {
				// TODO 接抽奖接口获取结果，找到中奖项的索引
				const index = Math.floor(Math.random() * 5);
				// 奖品的索引
				this.$refs.dialer.run(index)
			},
			goReward() {
				uni.navigateTo({
					url: '/pages/users/user_rewards/index'
				})
			}

		},
	};
</script>

<style scoped>
	.prize-draw-container {
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url("https://home.zjuzhan.com/crmebimage/public/maintain/2025/11/15/f94bd2333ad443ddb7c58908d739d57eejwnwqmws1.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 50px 20px;
	}

	.prize-draw-info {
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
	}

	.description {
		font-size: 28rpx;
		color: #fff;
	}

	.cost {
		font-size: 32rpx;
		color: #ff0000;
	}
	
	.integral {
		font-size: 32rpx;
		color: #ff0000;
	}

	.draw-button-container {
		margin-top: 20rpx;
	}

	.draw-button {
		background-color: #ff0000;
		color: #fff;
	}
	
	.reward {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		right: 0;
		top: 122px;
		width: 72px;
		height: 28px;
		opacity: 1;
		border-radius: 14px 0px 0px 14px;
		background: rgba(4, 0, 43, 0.5);
		color: rgba(255, 255, 255, 1);
	}
</style>